<template>
  <view>
    <NavBar
      nav-title="兑换成功"
      bg-color="white"
      :custom-els="['commonTitle']"
      :back-executor="handleReturnHome"
    />
    <view class="exchange_wrap">
      <text class="success_icon font_family icon-chenggong_tongyong_1" />
      <view class="success_title">兑换礼品成功</view>
      <view class="success_content">我们会尽快发货！鑫方盛平台不会以任何理由，提醒您点击任何链接进行退款操作，谨防上当受骗！</view>
      <view class="list-bg detail_wrap">
        <MenuCell
          :cell-data="exchangeCell.data"
          :cell-column="exchangeCell.column"
        />
      </view>
    </view>
    <!-- 底部按钮栏 -->
    <PageFooterBar
      only-btn
      :btn-list="btnList"
      @confirm="handleViewOrder"
      @cancel="handleReturnHome"
    />
  </view>
</template>

<script>
import NavBar from '@/components/navBar'
import MenuCell from '@/components/menu-cell'
import PageFooterBar from '@/components/page-footer-bar'
export default {
  name: 'ExchangeSuccess',
  components: {
    NavBar,
    MenuCell,
    PageFooterBar
  },
  data() {
    return {
      btnList: [
        { name: '返回首页' },
        { name: '查看订单' }
      ],
      exchangeCell: {
        column: [],
        data: {}
      }
    }
  },
  onLoad(options) {
    const successInfo = JSON.parse(options?.successInfo) ?? {}
    this.setExchangeCell(successInfo)
  },
  methods: {
    setExchangeCell(successInfo) {
      const cells = [
        { label: '兑换时间', fields: ['exchangeTime'] },
        { label: '扣除积分', fields: ['needIntegral'] },
        { label: '兑换订单号', fields: ['orderId'] },
        { label: '配送方式', fields: ['deliveryWay'] }
      ]
      if (successInfo.exchangeType == 0) {
        cells[1].label = '扣除积分'
      } else {
        cells[1].label = '扣除鑫币'
      }
      this.exchangeCell.column = cells.map(item => ({
        ...item,
        labelStyle: 'font-size: 28rpx;color: #666;margin-left: 12rpx',
        contentStyle: 'font-size: 28rpx;margin-right: 32rpx'
      }))
      this.exchangeCell.data = {
        exchangeTime: successInfo.exchangeTime,
        needIntegral: successInfo.needIntegral,
        orderId: successInfo.orderId,
        deliveryWay: successInfo.deliverWayStr,
      }
    },
    // 查看订单
    handleViewOrder() {
      const { orderId } = this.exchangeCell.data
      uni.navigateTo({
        url: `/myAccount/pointsMall/exchangeRecords`
      })
    },
    // 返回首页
    handleReturnHome() {
      uni.reLaunch({ url: '/pages/index/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.exchange_wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 32rpx;
  .success_icon {
    margin-top: 76rpx;
    font-size: 128rpx;
    color: $uni-color-success;
  }
  .success_title {
    margin-top: 16rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
  .success_content {
    margin-top: 24rpx;
    padding: 0 12rpx;
    text-align: center;
    color: $uni-text-color-grey;
  }
  .detail_wrap {
    width: 100%;
    margin-top: 32rpx;
  }
}
</style>
